<template>
  <div class="hotel">
    <headers></headers>
    <div class="hotel-content">
      <!-- 搜索区域 - 使用卡片包装 -->
      <el-card class="search-card">
        <div class="search-area">
          <div class="search-fields">
            <el-select 
              v-model="search.attractions" 
              placeholder="请选择景点" 
              size="small"
              class="attraction-select"
              clearable
            >
              <el-option 
                v-for="(item, index) in attractions" 
                :key="index"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
            
            <el-input 
              v-model="search.name" 
              placeholder="请输入酒店名称" 
              size="small"
              class="hotel-name-input"
              prefix-icon="el-icon-search"
              clearable
            ></el-input>
            
            <el-button 
              type="primary" 
              size="small" 
              @click="searchPage"
              icon="el-icon-search"
              class="search-button"
            >搜索</el-button>
          </div>
        </div>
      </el-card>
      
      <!-- 酒店列表区域 -->
      <div class="hotel-list-container" v-loading="loading">
        <transition-group name="hotel-fade" tag="div" class="hotel-grid">
          <div 
            v-for="(item, index) in tableData" 
            :key="item.id" 
            class="hotel-card"
          >
            <div class="hotel-image">
              <img :src="item.images.split(',')[0]" :alt="item.name">
              <div class="hotel-tags">
                <el-tag size="mini" type="success">热门</el-tag>
                <el-tag size="mini" type="warning" v-if="index < 3">抢手</el-tag>
              </div>
            </div>
            <div class="hotel-info">
              <h3 class="hotel-name">{{ item.name }}</h3>
              <div class="hotel-stars">
                <i v-for="n in Math.floor(Math.random() * 2) + 3" :key="n" class="el-icon-star-on"></i>
              </div>
              <p class="hotel-intro">{{ item.introduce }}</p>
              <div class="hotel-features">
                <span><i class="el-icon-location"></i> 距离市中心{{ Math.floor(Math.random() * 10) + 1 }}km</span>
              </div>
              <div class="hotel-footer">
                <div class="hotel-price">
                  <span class="price-from">起价</span>
                  <span class="price-value">¥{{ Math.floor(Math.random() * 500) + 300 }}</span>
                </div>
                <el-button 
                  type="primary" 
                  size="small" 
                  round
                  class="booking-button"
                  @click="toInfo(item.id)"
                >立即预订</el-button>
              </div>
            </div>
          </div>
        </transition-group>
        
        <!-- 空状态 -->
        <el-empty 
          v-if="tableData.length === 0 && !loading" 
          description="没有找到符合条件的酒店"
        ></el-empty>
      </div>
      
      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
          background
          :current-page.sync="search.pageNumber"
          :page-size="search.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysHotelPage, getSysAttractionsList } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  data() {
    return {
      search: {
        name: "",
        state: "1",
        attractions: "",
        pageSize: 12,
        pageNumber: 1,
      },
      total: 100,
      tableData: [],
      attractions: [],
      loading: false,
    }
  },
  components: {
    headers,
    bottoms
  },
  methods: {
    getSysAttractionsList() {
      this.loading = true;
      getSysAttractionsList().then(res => {
        if (res.code == 1000) {
          this.attractions = res.data;
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    searchPage() {
      this.search.pageNumber = 1;
      this.getSysHotelPage();
    },
    getSysHotelPage() {
      this.loading = true;
      getSysHotelPage(this.search).then(res => {
        if (res.code == 1000) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    toInfo(id) {
      this.$router.push("/hotelInfo?id=" + id);
    },
    handleCurrentChange(val) {
      this.search.pageNumber = val;
      window.scrollTo({ top: 0, behavior: 'smooth' });
      this.getSysHotelPage();
    }
  },
  mounted() {
    this.getSysAttractionsList();
    this.getSysHotelPage();
  }
}
</script>

<style scoped>
/* 整体页面样式 */
.hotel {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.hotel-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 搜索区域样式 */
.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.search-area {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.search-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.attraction-select {
  width: 180px;
}

.hotel-name-input {
  width: 300px;
}

.search-button {
  transition: all 0.3s;
}

.search-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 酒店列表样式 */
.hotel-list-container {
  min-height: 600px;
}

.hotel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.hotel-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

.hotel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.hotel-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.hotel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hotel-card:hover .hotel-image img {
  transform: scale(1.05);
}

.hotel-tags {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
}

.hotel-info {
  padding: 15px;
}

.hotel-name {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.hotel-stars {
  margin-bottom: 8px;
  color: #F7BA2A;
}

.hotel-intro {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #606266;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotel-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #909399;
}

.hotel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ebeef5;
  padding-top: 12px;
  margin-top: 10px;
}

.hotel-price {
  display: flex;
  flex-direction: column;
}

.price-from {
  font-size: 12px;
  color: #909399;
}

.price-value {
  font-size: 20px;
  font-weight: bold;
  color: #F56C6C;
}

.booking-button {
  padding: 8px 20px;
  transition: all 0.3s;
}

.booking-button:hover {
  transform: scale(1.05);
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

/* 动画效果 */
.hotel-fade-enter-active, .hotel-fade-leave-active {
  transition: all 0.5s;
}

.hotel-fade-enter, .hotel-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .hotel-grid {
    grid-template-columns: 1fr;
  }
  
  .search-fields {
    flex-direction: column;
    align-items: stretch;
  }
  
  .attraction-select,
  .hotel-name-input {
    width: 100%;
  }
}
</style>